<template>
    <div class="P-profile">
        <div class="P-profileCon">
            <!-- <div class="desc">在页面展示表单数据:</div> -->
            <!-- <div class="btn"><button @click="changeHeader">切换头像值</button></div> -->
            <vform ref="form" :data.sync="formData" :config="formConf">
                <!-- v-slot:header="{ props }" -->
                <template v-slot:header>
                    我是 slot 插入的非常规组件: {{ formData.header }}
                    <!-- <input type="text" v-model="formData.header" /> -->
                </template>
                <template v-slot:address>我是 slot 插入的非常规组件</template>
            </vform>
            <!-- <div class="c">页面传递给表单时值展示：</div> -->
            <!-- <div>{{ formData }}</div> -->
        </div>
        <div class="P-profileCtrl">
            <button @click="submit">提交</button>
        </div>
    </div>
</template>
<script>
import { setTitle } from "@/util";
import { mapMutations } from 'vuex';
export default {
    data: function () {
        return {
            formConf: [
                {
                    key: "name",
                    mod: "input",
                    type: "text",
                    title: "姓名",
                    required: true,
                    validate: function(val, data, item){  
                        if(!val) return '姓名不能为空';
                        return true;
                    }
                },
                {
                    key: "age",
                    mod: "input",
                    type: "number",
                    title: "年龄",
                    required: true,
                    length: 10,
                    validate: function(val, data, item){ 
                        if(!val) return '年龄不能为空';
                        return true;
                    }
                },
                {
                    key: "sex",
                    mod: "radio",
                    title: "性别",
                    required: true,
                    options: [
                        {
                            val: 1,
                            name: "男",
                        },
                        {
                            val: 2,
                            name: "女",
                        },
                    ],
                    validate: function(val, data, item){  //validate 可指定可不指定
                        if(!val) return '请选择性别';
                        return true;
                    }
                },
                 {
                    key: "id",
                    mod: "input",
                    type: "text",
                    title: "身份证号",
                    required: true,
                    validate: function(val, data, item){  //validate 可指定可不指定
                        if(!val) return '身份证号不能为空';
                        return true;
                    }
                },
                {
                    key: "hobby",
                    mod: "checkbox",
                    title: "爱好",
                    options: [
                        {
                            val: 1,
                            name: "游泳",
                        },
                        {
                            val: 2,
                            name: "健身",
                        },
                        {
                            val: 3,
                            name: "跑步",
                        },
                    ],
                    value: []
                },
                {
                    key: "header",
                    mod: "custom",
                    title: "头像",
                    show: function (data, item) {
                        console.log("头像显示问题处理");
                        return data.sex == 1 ? false : true;
                    },
                    config: {
                        multiple: true,
                        max: 3,
                    },
                },
                {
                    key: "address",
                    mod: "custom",
                    title: "地区",
                },
            ],
            formData: {
                header: ""
            }
        };
    },
    methods: {
        changeHeader: function () {
            let header = this.formData.header;
            this.formData.header = header == "Hello" ? "World" : "Hello";
        },
        submit(){
            this.$refs.form.validate().then(res=>{
                console.log('校验成功');
                this.setPopCon('确认要提交吗?');
                this.togglePop();
            }).catch(e=>{
                console.log('校验失败');
            });
        },
        ...mapMutations(['togglePop', 'setPopCon'])
    },
    created(){
        setTitle("个人信息");
        console.log('page created');
    },
    beforeCreate(){
        console.log('page beforeCreate');
    },
    mounted(){
        console.log('page mounted');
    },
    beforeMount(){
          console.log('page beforeMount');
    }
};
</script>
<style lang='less'>
@import "@/components/common/var.less";
.P-profile{
    &Con{

    }
    &Ctrl{
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 5;
        button{
            .btn();
            display: block;
            width: 100%;
            padding: 0;
        } 
    }
}
.desc {
    line-height: 60px;
    text-align: center;
    background: lightcyan;
}
.btn {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    button {
        .btn();
    }
}
.c {
    text-align: center;
    font-size: 28px;
    line-height: 1.6em;
    padding: 10px;
}
</style>